<template>
    <div class="app-container">
        <div class="topform">
            <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                      autocomplete="off"/>
            <el-button type="primary" style="margin-left: 10px" @click="getlistdata(true)" icon="el-icon-search">搜索
            </el-button>
            <el-button type="primary" @click="dialog=true" icon="el-icon-circle-plus-outline">添加</el-button>
        </div>
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                  header-cell-class-name="tableheader">
            <el-table-column align="center" label="角色名称">
                <template slot-scope="scope">
                    {{ scope.row.role_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="角色设置" :visible.sync="dialog" width="35%" @close="dialogclose">
            <el-form :model="dialogform" ref="dialogform" :rules="rule" label-width="120px">
                <el-form-item label="角色名称：" prop="role_name">
                    <el-input v-model="dialogform.role_name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="Web权限分配：">
                    <el-tree ref="webrole" :data="weballrole" :props="props" node-key="name"
                             :show-checkbox="true"></el-tree>
                </el-form-item>
                <el-form-item label="App权限分配：">
                    <el-tree ref="approle" :data="appallrole" :props="props" node-key="name"
                             :show-checkbox="true"></el-tree>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogbtn">确 定 修 改</el-button>
            </div>
        </el-dialog>
        <div class="pagination">
            <el-pagination
                    style="text-align: center"
                    layout="prev, pager, next"
                    small
                    :current-page="form.page"
                    :page-size="form.pagesize"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"/>
        </div>
    </div>
</template>

<script type="es6">
export default {
    data() {
        return {
            form: {
                serchKeyword: '',
                page: 1,
                pagesize: 20
            },
            dialogform: {
                rid: '',
                role_name: '',
                menu_ids: []
            },
            rule: {
                role_name: [
                    { required: true, message: '此项为必填项' }
                ],
            },
            props: {
                label: function (item) {
                    return item.meta.title
                },
                children: "children"
            },
            weballrole: [],
            appallrole: [],
            list: [],
            total: 0,
            listLoading: true,
            dialog: false,
        };
    },
    created() {
        this.getlistdata();
        this.getallrole();
    },
    methods: {
        //获取角色数据
        getlistdata(isquery) {
            if (isquery === true) {
                this.form.page = 1
            }
            this.listLoading = true;
            this.$post(this.$api + '/System/Role/get_pagelist', {
                'serchKeyword': this.form.serchKeyword,
                'isPage': true,
                'page': this.form.page,
                'pagesize': this.form.pagesize
            })
                .then((res) => {
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.list = res.rows;
                        this.total = res.total;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        //获取全部树形菜单
        getallrole() {
            this.$get(this.$api + '/System/Role/GetALLTreeMenu', {
                'menu_type': 0
            })
                .then((res) => {
                    if (res.code === 0) {
                        this.weballrole = res.data;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
            this.$get(this.$api + '/System/Role/GetALLTreeMenu', {
                'menu_type': 1
            })
                .then((res) => {
                    if (res.code === 0) {
                        this.appallrole = res.data;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        //打开编辑弹框
        openedit(item) {
            this.listLoading = true;
            this.$get(this.$api + '/System/Role/GetRoleModel', {
                'rid': item.rid
            })
                .then((res) => {
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.dialogform.rid = res.data.role.rid;
                        this.dialogform.role_name = res.data.role.role_name;
                        this.$nextTick(() => {
                            this.$refs.webrole.setCheckedNodes(res.data.toLable);
                            this.$refs.approle.setCheckedNodes(res.data.toLable2);
                        });
                        this.dialog = true;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        //关闭编辑弹框
        dialogclose() {
            this.dialogform = {
                rid: '',
                role_name: '',
                menu_ids: [],
            };
            this.$nextTick(() => {
                this.$refs.webrole.setCheckedNodes([]);
                this.$refs.approle.setCheckedNodes([]);
            });
        },
        //确定修改按钮
        dialogbtn() {
            this.$refs['dialogform'].validate((valid) => {
                if (valid) {
                    this.listLoading = true;
                    let wmenu_ids = [];
                    let amenu_ids = [];
                    for (var w in this.$refs.webrole.getCheckedNodes(false, true)) {
                        wmenu_ids.push(this.$refs.webrole.getCheckedNodes(false, true)[w].name);
                    }
                    for (var a in this.$refs.approle.getCheckedNodes(false, true)) {
                        amenu_ids.push(this.$refs.approle.getCheckedNodes(false, true)[a].name);
                    }
                    let wepmenu = Array.from(new Set(wmenu_ids));
                    let ids = wepmenu.concat(Array.from(new Set(amenu_ids)));
                    let role_model = {
                        'rid': this.dialogform.rid,
                        'role_name': this.dialogform.role_name,
                    };
                    this.$post(this.$api + '/System/Role/save_item', {
                        'role_model': role_model,
                        'ids': ids
                    })
                        .then((res) => {
                            this.listLoading = false;
                            if (res.code === 0) {
                                this.$notify({
                                    title: '成功',
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.dialog = false;
                                this.getlistdata();
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                }
            })
        },
        //删除
        delbtn(item) {
            this.$confirm('确认删除？?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                this.$get(this.$api + '/System/Role/DelRole', {
                    'rid': item.rid
                })
                    .then((res) => {
                        this.listLoading = false;
                        if (res.code === 0) {
                            this.$notify({
                                title: '成功',
                                message: res.msg,
                                type: 'success'
                            });
                            this.getlistdata();
                        } else {
                            this.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
            })
        },
        handleSizeChange(v) {
            this.form.pagesize = v;
            this.getlistdata();
        },
        handleCurrentChange(v) {
            this.form.page = v;
            this.getlistdata();
        }
    }
};
</script>
